<template>
  <el-dialog
    :title="view === 'detail'? '员工信息导入预览': ''"
    :visible="true"
    custom-class="orderDetailWrapper"
    width="60%"
    :before-close="closeDialog"
    >
    <vue-body>
      <el-table
        v-loading.body="loading"
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          prop="name"
          width="150"
          label="员工姓名">
        </el-table-column>
        <el-table-column
          prop="staffNo"
          label="工号">
        </el-table-column>
        <el-table-column
          prop="phone"
          label="电话" width="130">
        </el-table-column>
        <el-table-column
          prop="email"
          label="邮箱">
        </el-table-column>
        <el-table-column
          prop="idNo"
          label="证件编号">
        </el-table-column>
      </el-table>
    </vue-body>
    <vue-footer style="padding: 5px 0;margin: 0 -5px;float:right;">
      <el-pagination
        :current-page.sync="currentPage"
        :page-size="10"
        layout="total, prev, pager, next"
        :total="pageSize">
      </el-pagination>
    </vue-footer>
    <div slot="footer" class="dialog-footer">
      <el-button v-if="formFilter.applyStatus == '02' || formFilter.applyStatus == '03'" @click="stopSubmit()">取消导入</el-button>
      <el-button v-if="formFilter.applyStatus == '02' || formFilter.applyStatus == '03'" type="info" @click="submit()">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {queryImportStaff,confirmImportStaff,cancelImport} from '@/services/batchImport'
import { RequestError } from "@/services/errors";
import { mapActions } from "vuex";
export default {
  name: "edit-role",
  data () {
    return {
      loading: false,
      currentPage: 1,
      pageSize: 10,
      orderNo:"",
      formData: {
      },
      dialogFormVisible: false,
      formFilter: {
        companyNo: "",
        applyNo:""
      },
      applyNo:"",
      tableData: [],
      id:""
    }
  },
  props: {
    view: {
      type: String,
      default: "detail"
    }
  },
  methods: {
    ...mapActions(["setUserInfo"]),
    closeDialog() {
      this.$emit("close");
    },
    async loadData () {
      this.loading = true
      try {
        let data = await queryImportStaff(Object.assign({currentPage: this.currentPage},{perPage:10}, this.formFilter))
        // debugger
        this.tableData = data.data
        this.pageSize = parseInt(data.totalResult)
      } catch (e) {
        if (e instanceof RequestError) {
          this.$alert(e.message, '提示', {
            type: 'error',
            confirmButtonText: '确定'
          })
        } else {
          throw e
        }
      }
      this.loading = false
    },
    async submit(formName) {
      this.Subabled = true;
      this.butTimeOut();
      try {
        await confirmImportStaff(this.formFilter.applyNo);
        this.$emit("close", true);
        this.$message({
          showClose: true,
          message: "提交成功",
          type: "success"
        });
      } catch (e) {
        if (e instanceof RequestError) {
          this.$alert(e.message, "提示", {
            type: "error",
            confirmButtonText: "确定"
          });
        } else {
          throw e;
        }
      }
    },
    async stopSubmit(){
      this.Subabled = true;
      this.butTimeOut();
      try {
        await cancelImport(this.formFilter.applyNo,this.formFilter.companyNo);
        this.$emit("close", true);
        this.$message({
          showClose: true,
          message: "已取消员工信息导入",
          type: "success"
        });
      } catch (e) {
        if (e instanceof RequestError) {
          this.$alert(e.message, "提示", {
            type: "error",
            confirmButtonText: "确定"
          });
        } else {
          throw e;
        }
      }
    },
    butTimeOut(){
      var serf = this;
      setTimeout(function(){
        serf.Subabled = false;
      },1200)
    }
  },
  mounted() {
  	
  },
  filters: {
  },
  watch: {
    currentPage (newVal) {
      this.loadData(newVal)
    }
  },
};
</script>
<style>
.el-select {
  width: 100%;
}
.orderDetailWrapper{
  width: 50%;
}
.typeBox{
	background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #bfcbd9;
    box-sizing: border-box;
    color: #1f2d3d;
    font-size: inherit;
    height: 36px;
    line-height: 30px;
    outline: 0;
    padding: 3px 10px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
}
.logoImg{
	height: 120px;
	border-radius: 4px;
	border: 1px solid #bfcbd9;
	padding: 5px;
}
.el-textarea__inner{
	height: 100px;
	resize:none;
}
</style>
